<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>
<form id="from-data" class="layui-form" action="">
    <div class="mainBox" >
        <div class="main-container">
            <div class="main-container" style="margin: 0 auto">

                <div class="layui-form-item">
                    <label class="layui-form-label">旧密码: </label>
                    <div class="layui-input-inline">
                        <input type="password"  name="oldPassword"  lay-verify="required" autocomplete="off" placeholder="请输入原密码" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        使用的旧密码
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">新密码: </label>
                   <div class="layui-input-inline">
                        <input type="password" name="password"  lay-verify="password" autocomplete="off" placeholder="请输入新密码" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        6到12个字符
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码: </label>
                    <div class="layui-input-inline">
                        <input type="password"  name="checkPassword"  lay-verify="checkPassword" autocomplete="off" placeholder="请再次输入新密码" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        确认密码
                    </div>
                </div>

                <span id="msg"></span>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button id="submit" type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                确认修改
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>

    let checked = false;

layui.use(['form','jquery'],function(){
    let form = layui.form;
    let $ = layui.jquery;

    // 自定义验证
    form.verify({
        password: [/(.+){6,12}$/, '密码必须6到12位']
        ,checkPassword: function (value) {
            if ($('input[name=password]').val() !== value){
                return '两次密码不一致';
            }
        }
    });

    form.on('submit(user-save)', function(data){
        // console.log(data.field);
        // console.log(data);   871c61bbb909d9ca1aea87d239a30010   f4bur8yu
        $.ajax({
            type: 'post', // 提交方式 get/post
            url: '/user/updatePassword', // 需要提交的 url
            data: data.field,
            success:function(result){

                if (result.code === 200){
                    layer.msg(result.message, {icon: 1, time: 500}, function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                    });
                }else {
                    layer.msg(result.message, {icon: 2, time: 500}, function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                    });
                }

            },
            error:function (data) {
                layer.msg('失败',{icon:2,time:500},function(){
                    parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                });
                console.log("error"+data)
            }
        });
        return false; // 阻止表单自动提交事件，必须返回false，否则表单会自己再做一次提交操作，并且页面跳转

    });





})


// 检验密码
function checkPassword() {
    let $ = layui.jquery;
    var password1 = $("input[name=password1]").val();
    var password2 = $("input[name=password2]").val();

    if( password1 === password2 ){
        checked = true;
        $("#submit").disabled = false;
        $("#msg").innerText = "";
        console.log("true")
    }else {
        $("#submit").disabled = true;
        checked = false;
        $("#msg").innerText = "两次密码不一致！";
        console.log("false")

    }


}



</script>

</body>
</html>
